跳到主要内容

CSS 中的选择器

基础选择器​

  • tagname——类型选择器或者标签选择器。该选择器匹配目标元素的标签名。它的优先级是 0,0,1。例如：p、h1、strong。
  • .class——类选择器。该选择器匹配 class属性中有指定类名的元素。它的优先级是 0,1,0。例如：.media、.nav-menu
  • #id——ID 选择器。该选择器匹配拥有指定 ID 属性的元素。它的优先级是 1,0,0。例如：#sidebar。
  • *——通用选择器。该选择器匹配所有元素。它的优先级是 0,0,0

组合器​

组合器将多个基础选择器连接起来组成一个复杂选择器。例如，在 .nav-menu li 选择器中，两个基础选择器之间的空格被称作后代组合器（descendant combinator）。它表示目标元素 <li> 是一个拥有 nav-menu 类的元素的后代。后代组合器是最常见的组合器。不过还存在其他几个组合器，它们分别代表了元素的某种特定关系

  • 子组合器（>）——匹配的目标元素是其他元素的直接后代。例如：.parent > .child。
  • 相邻兄弟组合器（+）——匹配的目标元素紧跟在其他元素后面。例如：p + h2。
  • 通用兄弟组合器（~）——匹配所有跟随在指定元素之后的兄弟元素。注意，它不会选中目标元素之前的兄弟元素。例如：li.active ~ li

后代选择器例子​

后代元素选择器：选中指定元素的指定后代元素

/* 语法：祖先元素 后代元素 { }（中间用空格隔开） */
div span{
	color: green;
}

相邻选择器例子​

复合选择器​

多个基础选择器可以连起来（不使用空格或者其他组合器）组成一个复合（compound）选择器（例如：h1.page-header）。

复合选择器选中的元素将匹配其全部基础选择器。例如，.dropdown.is-active 能够选中 <div class="dropdown is-active">，但是无法选中 <div class="dropdown">。

伪类选择器​

伪类选择器（pseudo-class selector）用于选中处于特定状态的元素。例如，:hover 伪类选择器用于选中鼠标悬停的元素。伪类选择器的语法是一个冒号（:）后面跟着伪类的名称。例如，:hover、:focus、:active。

伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互，也可能是由于元素相对于其父级或兄弟元素的位置。伪类选择器始终以一个冒号（:）开始。优先级等于一个类选择器（0,1,0）

  • :first-child——匹配的元素是其父元素的第一个子元素。
  • :last-child——匹配的元素是其父元素的最后一个子元素。
  • :only-child——匹配的元素是其父元素的唯一一个子元素（没有兄弟元素）。
  • :nth-child(an+b)——匹配的元素在兄弟元素中间有特定的位置。

:nth-child(an+b) 公式 an+b 里面的 a 和 b 是整数，该公式指定要选中哪个元素。要了解一个公式的工作原理，请从 0 开始代入 n 的所有整数值。公式的计算结果指定了目标元素的位置。。下表给出了一些例子。

  • :nth-last-child(an+b) ——类似于 :nth-child()，但不是从第一个元素往后数，而是从最后一个元素往前数。括号内的公式与:nth-child()里的公式的规则相同。
  • :first-of-type——类似于 :first-child，但不是根据在全部子元素中的位置查找元素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。
  • :last-of-type——匹配每种类型的最后一个子元素。
  • :only-of-type——该选择器匹配的元素是满足该类型的唯一一个子元素。
  • :nth-of-type(an+b)——根据目标元素在特定类型下的数字顺序以及特定公式选择元素，类似于 :nth-child。
  • nth-last-of-type(an+b)——根据元素类型以及特定公式选择元素，从其中最后一个元素往前算，类似于 :nth-last-child。
  • :not(<selector>)——匹配的元素不匹配括号内的选择器。括号内的选择器必须是基础选择器，它只能指定元素本身，无法用于排除祖先元素，同时不允许包含另一个排除选择器。
  • :empty——匹配的元素必须没有子元素。注意，如果元素包含空格就无法由该选择器匹配，因为空格在 DOM 中属于文本节点。写作本书时，W3C 正在考虑 :blank 伪类选择器，它跟:empty 的行为类似，但是能选中仅包含空格的元素，目前还没有浏览器支持 :blank。
  • :focus——匹配通过鼠标点击、触摸屏幕或者按 Tab 键导航而获得焦点的元素。
  • :hover——匹配鼠标指针正悬停在其上方的元素。
  • :root——匹配文档根元素。对 HTML 来说，这是 <html> 元素，但是 CSS 还可以应用到 XML 或者类似于 XML 的文档上，比如 SVG。在这些情况下，该选择器的选择范围更广。还有一些表单域相关的伪类选择器。其中一些是在选择器 Level4 版本的规范中提出或者修订的，因此在 IE10 以及其他一些浏览器中不受支持。请在 Can I Use 网站上查看兼容情况。
  • :disabled——匹配已禁用的元素，包括 input、select 以及 button 元素。
  • :enabled——匹配已启用的元素，即那些能够被激活或者接受焦点的元素。
  • :checked——匹配已经针对选定的复选框、单选按钮或选择框选项。
  • :invalid——根据输入类型中的定义，匹配有非法输入值的元素。例如，当 <input type="email"> 的值不是一个合法的邮箱地址时，该元素会被匹配（Level4）。
  • :valid——匹配有合法值的元素（Level4）。
  • :required——匹配设置了 required 属性的元素（Level4）。
  • :optional——匹配没有设置 required 属性的元素（Level4）。

伪元素选择器​

伪元素 类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应 HTML 元素的特定部分。伪元素选择器可能只匹配元素的一部分，甚至向 HTML 标记中未定义的地方插入内容。

这些选择器以双冒号（::）开头，尽管大多数浏览器也支持单冒号的语法以便向后兼容。伪元素选择器的优先级与类型选择器（0,0,1）相等

  • ::before——创建一个伪元素，使其成为匹配元素的第一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定 content 属性才能让元素出现，例如：.menu::before。
  • ::after——创建一个伪元素，使其成为匹配元素的最后一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定 content 属性才能让元素出现，例如：.menu::after。
  • ::first-letter——用于指定匹配元素的第一个文本字符的样式，例如：h2::first-letter。
  • ::first-line——用于指定匹配元素的第一行文本的样式。
  • ::selection——用于指定用户使用鼠标高亮选择的任意文本的样式。通常用于改变选中文本的 background-color。只有少数属性可以使用，包括 color、background-color、cursor、text-decoration

下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}
编辑此页
最后由 alsritter.mac 于 更新